{{template "layout/layout_admin.html" .}}

{{define "style"}}

{{end}}
{{define "content"}}
<div class="layui-fluid main" style="margin:15px;">


    <fieldset class="layui-elem-field layui-field-title" style="margin-top:20px;">
        <legend>目标机器列表</legend>
    </fieldset>

    <div class="kit-table">
        <form class="layui-form" lay-filter="kit-search-form">
            <div class="kit-table-header">
                <div class="kit-search-btns">
                    <a href="{{urlfor "MachineController.AddMc"}}" data-action="add" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe608;</i> 新增</a>
                    <a href="javascript:;" data-action="del-bulk" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon">&#xe640;</i> 批量删除</a>
                </div>
                <div class="kit-search-inputs">
                    <div class="kit-search-keyword">
                        <input type="text" class="layui-input" name="keyword" placeholder="搜索关键字.." />
                        <button lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <table id="machine_table" lay-filter="mc_table"></table>

</div>
{{end}}


{{define "script"}}
<script type="text/html" id="tableTool">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['jquery','table'], function() {
    {{template "layout/baseJs.html" .}}
        var table = layui.table,
                $ = layui.jquery,
                layer = layui.layer,
                laytpl = layui.laytpl;

        table.render({
            elem: '#machine_table'
            ,height: 550
            ,url: '/admin/mc_list_api' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'ip', title: 'IP', width:180}
                ,{field: 'username', title: '名称', width:200}
                ,{field: 'remark', title: '备注'}
                ,{field: 'updated_at', title: '最后修改',width:250}
                ,{fixed: 'right', title: '操作', width:150, align:'center', toolbar: '#tableTool'}
            ]]
        });

        //监听工具条
        table.on('tool(mc_table)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            var tr = obj.tr;

             if(layEvent === 'del'){ //删除
                 console.log(data)
                layer.confirm('确认删除['+data.username+"]?", function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);

                    var url='{{urlfor "MachineController.DelMcDo"}}';
                    layer.load(2);
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: {id:data.id},
                        success: function(json){
                            layer.closeAll('loading');
                            if(json.status != 200){
                                QI.errorAlert(json.info);
                                return false;
                            }
                            QI.successAlert(json.info);
                            QI.delayJump('');
                        },
                        error:function(e){
                            layer.closeAll('loading');
                            QI.errorAlert('系统出小差了（'+e.statusText+'）');
                        }
                    });


                });
            } else if(layEvent === 'edit'){ //编辑
                location.href='{{urlfor "MachineController.EditMc"}}?id='+data.id;
            }
        });


    });
</script>
{{end}}
